<template>
  <div>
    <mt-header title="城市选择">
      <router-link style="text-decoration: none;" to="/getposition" slot="left">
        <span class="iconfont icon-go-back"></span>
      </router-link>
    </mt-header>
    <div class="search-city">
      <span class="iconfont icon-sousuo"></span>
      <input class="inp-city" type="text" placeholder="输入城市名或拼音" v-model="query" @input="queryCity" />
    </div>
    <a :id="item.idx" :class="['city-box', queryF? '' : 'display-none']" v-for="item in addrData.cityList" :key="item.idx">
      <p class="city-case">{{item.idx}}</p>
      <ul class="city-item-group">
        <li class="city-item" v-for="city in item.cities" :key="city.id"  @click="chooseAddr(city)">{{city.name}}</li>
      </ul>
    </a>
    <aside :class="['city-aside', queryF? '' : 'display-none']">
      <a :href="'#' + item" class="city-nav base-font-size" v-for="item in addrData.alphabet" :key="item">{{item}}</a>
    </aside>
    <div :class=" queryF? 'display-none' : ''">
      <ul class="city-item-group" v-if="queryList.length > 0">
        <li class="city-item" v-for="(city, i) in queryList" :key="i" @click="chooseAddr(city)">{{city.name}}</li>
      </ul>
      <p v-else class="no-result">无结果</p>
    </div>
  </div>
</template>

<script>
import { getCity, selectPosi, getAddrShopInfo } from '@/api/elm-data'
export default {
  name: 'choose-position',
  data() {
    return {
      addrData: [],
      query: '',
      queryList: [],
      queryF: true
    }
  },
  async created() {
    const { data } = await getCity()
    this.addrData = data
  },
  methods: {
    queryCity() {
      this.queryList = []
      if(this.query.length === 0) {
        this.queryF = true
      }else {
        this.queryF = false
      }
      const reg = new RegExp(this.query, 'gi')
      this.addrData.cityList.forEach(item => {
        item.cities.forEach(i => {
          if(reg.test(i.pinyin) || reg.test(i.name)) {
            this.queryList.push({
              name: i.name,
              longitude: i.longitude,
              latitude: i.latitude
            })
          }
        })
      })
    },
    async chooseAddr(city) {
      const { data } = await selectPosi(city.latitude, city.longitude)
      const { data: res } = await getAddrShopInfo(city.latitude, city.longitude)
      window.sessionStorage.setItem('index-data', JSON.stringify({data, res}))
      window.sessionStorage.setItem('posi-name', city.name)
      window.sessionStorage.setItem('position', 'success')
      window.sessionStorage.setItem('city_id', city.city_id)
      window.sessionStorage.setItem('Geo', JSON.stringify({latitude: city.latitude, longitude: city.longitude}))
      window.sessionStorage.setItem('select-city', JSON.stringify(city))
      this.$router.replace({
        name: 'getposition'
      })
    }
  }
}
</script>

<style scoped>
  .search-city {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00a9ff;
  }
  .icon-sousuo {
    position: relative;
    left: 40px;
    font-size: 30px;
  }
  .inp-city {
    width: 80%;
    height: 50px;
    padding-left: 50px;
    border-radius: 25px;
    border: none;
    font-size: 28px;
    box-sizing: border-box;
  }
  .city-box {
    display: block;
  }
  .city-case {
    margin: 0;
    padding: 10px 20px;
    font-size: 28px;
  }
  .city-item-group {
    margin: 0;
    background-color: #fff;
  }
  .city-item {
    padding: 30px 0;
    margin-left: -20px;
    border-bottom: 1px solid #d4d4d4;
    font-size: 30px;
    color: #565656;
  }
  .city-aside {
    position: fixed;
    right: 10px;
    top: 250px;
    width: 50px;
  }
  .city-nav {
    color: #868686;
    display: block;
    text-align: center;
    padding: 5px;
  }
  .no-result {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
